<template>
    <div>
        <el-form-item label="设备尺寸" class="mt5">
            {{devInfo.devWidth}}*{{devInfo.devHeight}}
        </el-form-item>
        <el-form-item label="自动刷新屏幕" class="mt5">
            <exSwitch v-model="devInfo.aotoQry" @change="onChange"></exSwitch>
            <exInput label="间隔(秒)" v-model.number="waitTime" size="mini" width="70"></exInput>
        </el-form-item>
        <el-form-item label="同步点击事件" class="mt5">
            <exSwitch v-model="devInfo.asyncClick"></exSwitch>
            (左键)
        </el-form-item>
        <el-form-item label="同步录制指令" class="mt5">
            <exSwitch v-model="devInfo.asyncRecordCmd"></exSwitch>
            (左键)
        </el-form-item>
        <el-form-item label="左键的坐标" class="mt5">
            <el-row>
                {{devInfo.clickX}}*{{devInfo.clickY}}
                转换后
                {{realX | fixed}}*{{realY | fixed}}
            </el-row>
            <el-row>
                颜色: {{devInfo.color}}
                <canvasCmp :colors="devInfo.color" type="point"></canvasCmp>
            </el-row>
        </el-form-item>
        <el-form-item label="右键的坐标" class="mt5">
            <el-row>
                {{devInfo.clickRX}}*{{devInfo.clickRY}}
                转换后
                {{realRX | fixed}}*{{realRY | fixed}}
            </el-row>
            <el-row>
                颜色: {{devInfo.rcolor}}
                <canvasCmp :colors="devInfo.rcolor" type="point"></canvasCmp>
            </el-row>
        </el-form-item>
        <el-form-item label="颜色线" class="mt5">
            <span style="word-break: break-all;display:inline-block;max-width:90%;max-height:80px;overflow-y:auto">
                <span v-if="devInfo.colors">({{devInfo.colors.length}}组)</span> {{devInfo.colors}}
            </span>
            <el-row>
                <canvasCmp :colors="devInfo.colors" type="line"></canvasCmp>
            </el-row>
        </el-form-item>
        <el-form-item label="颜色块" class="mt5">
            <span style="word-break: break-all;display:inline-block;max-width:90%;max-height:80px;overflow-y:auto">
                <span v-if="devInfo.rectcolors">({{devInfo.rectcolors.length}}组)</span>
            </span>
            <el-row>
                宽度: {{devInfo.rectcolorswidth}} 
                高度: {{devInfo.rectcolorsheight}}
                <canvasCmp :colors="devInfo.rectcolors" :rectWidth="devInfo.rectcolorswidth" :rectHeight="devInfo.rectcolorsheight" type="rect"></canvasCmp>
            </el-row>
        </el-form-item>
        <el-form-item label="当前应用" class="mt5">
            <span style="word-break: break-all;display:inline-block;max-width:90%">{{devInfo.curApp}}</span>
        </el-form-item>
        <el-form-item label="当前画面1" class="mt5">
            <span style="word-break: break-all;display:inline-block;max-width:90%">{{devInfo.curImg}}</span>
        </el-form-item>
        <!-- <el-form-item label="当前应用2" class="mt5">
            <span style="word-break: break-all;display:inline-block;max-width:90%">{{devInfo.curAppRnd}}</span>
        </el-form-item> -->
        <el-form-item label="手机按键" class="mt5">
            <el-link type="primary" @click="doDevKeyEvent(3)">HOME</el-link>
            <el-link type="primary" class="ml10" @click="doDevKeyEvent(4)">BACK</el-link>
            <el-link type="primary" class="ml10" @click="getDevPic">刷新画面</el-link>
        </el-form-item>
    </div>
</template>


<script>
import canvasCmp from "./cmd/util/canvasCmp.vue"

export default {
    components:{
        canvasCmp
    },
    props:["devInfo"],
    watch:{
    },
    data() {
        return {
            waitTime : 0,
        };
    },
     
    inject:["updateScreen","doDevKeyEvent","getDevPic"],
    provide () {
      return {
      }
    },
    watch:{
        "devInfo.curImg"(){
            if(this.devInfo.aotoQry){
                this.curRunTime = new Date().getTime();
                clearTimeout(this.timer)
                if(this.waitTime){
                    this.timer= setTimeout(() => {
                        this.getDevPic();
                    }, this.waitTime*1000);
                }else{
                    this.getDevPic();
                }
            }
        }
    },


    mounted() {

        var that = this;
        var autoTimer = setInterval(()=>{
            if(!that.devInfo.aotoQry) return;
            if(this.curRunTime){
                var curTime = new Date().getTime();
                if((curTime - this.curRunTime) > this.waitTime*1500){
                    that.getDevPic();
                }
            }
        },5000);
        this.$once('hook:beforeDestroy', () => {            
            clearInterval(autoTimer);                                    
        })
    },
    computed:{
        realX(){
            return this.devInfo.clickX*this.devInfo.devBet
        },
        realY(){
            return this.devInfo.clickY*this.devInfo.devBet
        },
        realRX(){
            return this.devInfo.clickRX*this.devInfo.devBet
        },
        realRY(){
            return this.devInfo.clickRY*this.devInfo.devBet
        }
    },
    methods: {
        onChange(){
            if(this.devInfo.aotoQry){
                this.curRunTime = new Date().getTime();
                this.getDevPic();
            }
        }
    }
}
</script>

<style lang="less" scoped>

</style>
